define([
  'underscore',
  'views/View',
  'hbs!template/media/image-media-view',
  'hbs!template/media/video-media-view',
  'swfObject'  
], function(_, View, image_media_template, video_media_template) {
  var MediaView = View.extend({
    
    initialize: function(options) {
      options || (options = {});

      View.prototype.initialize.apply(this, arguments);

      if(options.data) {
        this.data = options.data;
      }

      if(options.template) {
        this.template = options.template;
      }

      this.bind("open:modal", this.openModal);
    },

    openModal: function() {},
    
    prepare: function() {}, // Prepare function. It will be invoked a
    
    serialize: function() {
      var data = View.prototype.serialize.apply(this, arguments);

      data.media = this.data;
      
      return data;
    }
  });

  var ImageMediaView = MediaView.extend({
    template: image_media_template
  });

  var VideoMediaView = MediaView.extend({
    template: video_media_template,
    
    initialize: function(options) {
      MediaView.prototype.initialize.apply(this, arguments);

      // Bind player to this context. Very important because its needed to execute player function, if you render it as modal, using the modal's shown event.
      _.bindAll(this, 'prepare', 'player');
    },

    prepare: function() {
      this.player();
    },

    player: function() {
      var params = { allowScriptAccess: "always" };
      var atts = { id: "ytPlayer" };

      swfobject.embedSWF(this.getURLContent(), "videoDiv", "530", "315", "9", null, null, params, atts);
    },
    
    getURLContent: function() {
      return this.data.source;
      /*var videoID = this.data.source;
      return "http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=player1&autoplay=1";*/
    }
    
  });

  //
  MediaView._views = {
    "image": ImageMediaView,
    "video": VideoMediaView
  };
  
  return MediaView;
});